/** 编辑器 业务组件 pinia */
import { defineStore } from 'pinia'
import { v4 as uuidv4 } from 'uuid'

// TS封装的 本地缓存类
import { Storage } from '../../utils/storage'

import { PartialTextComponentProps } from '../../hooks/useComponentCommon'


import { textDefaultProps } from '../../defaultProps'

interface ComponentData {
  // 这个元素的属性 属性详情见下面
  props: PartialTextComponentProps// { [key: string]: any }
  // id, uuid 生成
  id: string
  // 业务组件库名称
  name: string
}

export interface EditorProps {
  // 供中间编辑器渲染的数组
  components: ComponentData[]
  // 当前编辑的是那个元素 uuid
  currentElement: string,
}

export const testComponents: ComponentData[] = [
  { id: uuidv4(), name: 'z-text', props: { ...textDefaultProps, text: '<span style="color: red">hello</span>测定', fontSize: '18px', tag: 'span' } },
  // { id: uuidv4(), name: 'z-text', props: { ...textDefaultProps, text: 'hello2', fontSize: '12px', tag: 'h1', lineHeight: '2', textAlign: 'center', fontFamily: '', color: 'pink', backgroundColor: '', width: '100px' } },
  // { id: uuidv4(), name: 'z-text', props: { ...textDefaultProps, text: 'hello3', fontSize: '16px', actionType: 'url', url: 'https://www.baidu.com/'} },
]


const useEditorStore = defineStore({
  id: 'editor',
  state: (): EditorProps => ({
    components: testComponents,
    currentElement: ''
  }),
  actions: {
    addComponents(props: PartialTextComponentProps) {
      this.components.push({
        id: uuidv4(),
        name: 'z-text',
        props: {
          ...textDefaultProps,
          ...props
        }
      })
      // console.log(1111, this.components)
    },
    setActive(currentId: string) {
      // console.log(currentId)
      this.currentElement = currentId
    },
    updateComponents(data: { key: string, value: string, id?: string}) {
      const { key, value, id } = data
      const updateComponents = this.components.find(item => item.id === (id || this.currentElement))

      if (updateComponents) {
        const strArr = updateComponents.props.boxShadow?.split(' ') as [string, string, string, string]
        if (key === 'boxShadowColor') {
          strArr[strArr.length - 1] = value
        }
        if (key === 'boxShadowHorizontal') {
          strArr[0] = value
        }
        if (key === 'boxShadowVertical') {
          strArr[1] = value
        }
        if (key === 'boxShadowBlur') {
          strArr[2] = value
        }
        
        updateComponents.props.boxShadow = strArr.join(' ')
        updateComponents.props[key] = value
        // console.log(updateComponents.props[key], value)
      }

      
      // console.log('updateComponents', useEditorStore().getCurrentElement, key, value)
      
      
      // this.components.map((item, index) => {
      //   if (item.id === this.currentElement) {
      //     this.components[index].props[key] = value
      //   }
      // })
    },
  },
  getters: {
    getCurrentElement: (state)  =>  {
      return state.components.find(item => item.id === state.currentElement)
    }
  }
})

export default useEditorStore